(function() {

	//获取当前根字体
	document.addEventListener('DOMContentLoaded', function() {
		var font = document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
	});

	function each() {
		var tableDom = $('.tb');
		var html;
		/***********获取json*****************/
		$.ajax({
			type: "GET",
			url: "../js/img.json",
			dataType: "json",
			success: function(data) {
				$.each(data, function(i, item) {
					var trs = "";
					trs += "<tr><td>" + (i + 1) + "</td><td><div class='circle'><img src=" + item.src + "/></div></td><td>" + item.name + "</td><td>" + item.num + "</td></tr>";
					html += trs;
				});
				tableDom.html(html);
				/*************排序****************/
				$(function() {
					var arr = [];
					for(var i = 0; i < $('.tb tr').length; i++) {
						//把数据推送到数组里面
						arr.push(parseInt($('.tb tr').eq(i).children().eq(3).text()));
					}
					//给tr整行内容冒泡排序
					for(var x = 0; x < arr.length; x++) {
						for(var y = x + 1; y < arr.length; y++) {
							if(arr[x] < arr[y]) {
								var tem, empty;
								empty = arr[x];
								arr[x] = arr[y];
								arr[y] = empty;
								tem = $('.tb tr').eq(x).html();
								$('.tb tr').eq(x).html($('.tb tr').eq(y).html());
								$('.tb tr').eq(y).html(tem);
							}
						}
						pai();
					}
					//当前排名
					$('.my_order table tr').html($('.tb tr').eq(15).html());
					//添加冠军
					for(var l = 0; l < 3; l++) {
						$('.tb tr').eq(l).children().eq(0).html('<span class="iconfont icon-guanjun"></span><p>' + (l + 1) + '</p>');
						$('.tb tr').eq(0).children().eq(0).children().eq(0).css('color', 'yellow');
						$('.tb tr').eq(2).children().eq(0).children().eq(0).css('color', 'darkorange');
					}
					$(document).ready(function() {
						var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
						var nScrollTop = 0; //滚动到的当前位置
						var nDivHight = $(".tab").height();
						$(".tab").scroll(function() {
							nScrollHight = $(this)[0].scrollHeight;
							nScrollTop = $(this)[0].scrollTop;
							if(nScrollTop + nDivHight >= nScrollHight) {
								var tem;
								$('.my_order').css('display', 'none')
							}
							if(nScrollTop + nDivHight < nScrollHight) {
								var tem;
								$('.my_order').css('display', 'block')
							}
						});
					});

				});
			},
			error: function(data) {}
		});
		/*************序号排序**************/
		function pai() {
			for(var i = 0; i < $('.tb tr').length; i++) {
				$('.tb tr').eq(i).children().eq(0).text(i + 1);
			}
		};
	}
	each();
	
	/*************动画效果控制******************/
	
	$(function() {
		var music = document.getElementById('music');
		$('#musicbutton').click(function() {
			if(music.paused) {
				music.play();
				$("#musicbutton").removeClass("pause").addClass("music");
				$('.musicbutton .iconfont').css({
					'animation': 'music 4s infinite '
				});
				$('.musicbutton').css({
					'animation': 'mu 4s infinite '
				});
				$('.icon').removeClass('icon-guanbiyinle').addClass('icon-yinle');
			} else {
				music.pause();
				$('#musicbutton').removeClass('play').addClass('music');
				$('.musicbutton .iconfont').css({
					'animation': 'none'
				});
				$('.musicbutton').css({
					'animation': 'none '
				});
				$('.icon').removeClass('icon-yinle').addClass('icon-guanbiyinle');
			}
		})
	});

})();